<template>
  <div class="body">
    <el-row :gutter="20" >
      <el-col :span="7">
          <div class="grid-content bg-purple">
            <div class="box1"   style="height:235px">
                <div class="title">
                <img
                    class="title_image"
                    src="../../assets/imgs/title1.png"
                    alt=""
                />
                <div class="title_name" style="padding-top: 3px">设备状态</div>
                </div>
                <div class="main1" >
                    <div class="main1_left">
                        <div class="progress">
                            <span class="state">正常</span>
                            <el-progress
                                class="progress_state"
                                :text-inside="true"
                                :stroke-width="15"
                                :percentage="percentageGood"
                            ></el-progress>
                            <span class="state_num">{{numGood}}台</span>
                        </div>
                        <div class="progress">
                            <span class="state">带病运行</span>
                            <el-progress
                                class="progress_state"
                                color="#F1B92E"
                                :text-inside="true"
                                :stroke-width="15"
                                :percentage="percentageBad1"
                            ></el-progress>
                            <span class="state_num">{{numBad1}}台</span>
                        </div>
                        <div class="progress">
                            <span class="state">故障</span>
                            <el-progress
                                class="progress_state"
                                :text-inside="true"
                                color="#FF3D79"
                                :stroke-width="15"
                                :percentage="percentageBad2"
                            ></el-progress>
                            <span class="state_num">{{numBad2}}台</span>
                        </div>
                    </div>
                </div>
            </div>
        </div></el-col
      >
      <el-col :span="17">
        <div class="grid-content bg-purple">
          <div class="box2"  style="height:235px">
            <div class="title">
              <img
                class="title_image"
                src="../../assets/imgs/title2.png"
                alt=""
              />
              <div class="title_name" style="padding-top: 3px">今日报修</div>
            </div>
            <div class="warranty" style="padding: 2px">
                <div v-show="!warrantyShow" style="padding: 20px">今天暂时没有保修</div>
                <el-table :data="warrantyData" stripe style="width: 100%;" height="200px" v-show="warrantyShow">
                    <el-table-column prop="num" label="维修编号" >
                    </el-table-column>
                    <el-table-column prop="name" label="设备名称">
                    </el-table-column>
                    <el-table-column prop="error" label="异常项目"> 
                    </el-table-column>
                    <el-table-column prop="sys_user.name" label="创建人"> 
                    </el-table-column>
                </el-table> 
            </div>
          </div>
        </div>
      </el-col>
      
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="7" 
        ><div class="grid-content bg-purple">
          <div class="box4">
            <div class="title">
              <img
                class="title_image"
                src="../../assets/imgs/title4.png"
                alt=""
              />
              <div class="title_name" style="padding-top: 3px">设备使用状态</div>
              <div class="main1">
                <div id="myChart1" class="myChart1"></div>
              </div>
            </div>
          </div></div
      ></el-col>
      <el-col :span="17"
        ><div class="grid-content bg-purple">
          <div class="box5">
            <div class="title">
              <img
                class="title_image"
                src="../../assets/imgs/title5.png"
                alt=""
              />
              <div class="title_name" style="padding-top: 3px">
                报修工单月曲线
              </div>
              <div class="main1" id="main1">
                <div id="myChart2" class="myChart2"></div>
              </div>
            </div>
          </div></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { today, every } from "../../api/warranty";
import { status } from "../../api/manage";

export default {
  data() {
    return {
        warrantyData: [],
        warrantyShow: true,
        percentageGood: 0,
        numGood:0,
        percentageBad1: 0,
        numBad1:0,
        percentageBad2: 0,
        numBad2:0,
        equipUseNum: [0,0, 0],
        myChart1:'',
        option1: '',
        myChart2:'',
        option2: '',
        monthNum: [0,0,0,0,0,
                    0,0,0,0,0,
                    0,0,0,0,0,
                    0,0,0,0,0,
                    0,0,0,0,0,
                    0,0,0,0,0,
                    0
                ],
        curMonthDate: [],
    };
  },
  components: {},
  created() {
    this.init()
    
  },
  mounted() {
    this.mounted1();
    this.mounted2();
  },
  methods: {
        init() {
            today().then((res) => {
                this.warrantyData = res.data.rows;
                if(this.warrantyData.length == 0)
                    this.warrantyShow = false
            });
            status().then(res => {
                let data = res.data.rows
                for(let i = 0; i < data.length; i ++) {
                    if(data[i].status == "正常") {
                        this.numGood++
                        this.percentageGood = this.numGood / data.length
                        this.percentageGood = Math.round(this.percentageGood * 100)
                    }
                    if(data[i].status == "带病运行") {
                        this.numBad1++
                        this.percentageBad1 = this.numBad1 / data.length
                        this.percentageBad1 = Math.round(this.percentageBad1 * 100)
                    }
                    if(data[i].status == "故障") {
                        this.numBad2++
                        this.percentageBad2 = this.numBad2 / data.length
                        this.percentageBad2 = Math.round(this.percentageBad2 * 100)
                    }

                    if(data[i].mode == "在用") {
                        this.equipUseNum[0]++
                    }
                    if(data[i].mode == "出租") {
                        this.equipUseNum[1]++
                    }
                    if(data[i].mode == "禁用") {
                        this.equipUseNum[2]++
                    }
                }
                this.myChart1.setOption(this.option1)
            })

            every().then(res => {
                let data = res.data.rows
                let curMonth = new Date().getMonth() + 1
                let curYear = new Date().getFullYear()
                let curMonth2 
                if(curMonth < 10) {
                    curMonth2 = '0' + curMonth
                }else {
                    curMonth2 = String(curMonth)
                }
                console.log(curMonth2)
                console.log(typeof(curMonth2))
                for( let i = 0; i < data.length; i ++) {
                    let monthArr = data[i].created_at.split('-')
                    let d = new Date(curYear, curMonth2, 0)
                    let curMonthDate = d.getDate()
                    for(let i = 0; i < curMonthDate; i++) {
                        this.curMonthDate[i] = i + 1;
                    }
                    for(let i = curMonthDate; i < 31; i ++) {
                        this.monthNum[i] = null;
                    }
                    if(monthArr[0] == curYear && monthArr[1] == curMonth2) {
                        for(let j = 1; j <= curMonthDate; j ++) {
                            if(j < 10) {
                                if((monthArr[2][0] + monthArr[2][1]) == ('0' + j)) {
                                    this.monthNum[j-1]++
                                }
                            } else {
                                if((monthArr[2][0] + monthArr[2][1]) == j) {
                                    this.monthNum[j-1]++
                                }
                            }
                        }
                    }
                }
                this.myChart2.setOption(this.option2)
            })
        },
    format(percentage) {
      return percentage;
    },

    mounted1() {
        
        //this.$root => app
        this.myChart1 = this.$root.echarts.init(
            document.getElementById("myChart1")
        );
        // 绘制图表
        this.option1 = {
            tooltip: {},
            xAxis: {
                data: ["在用", "出租", "禁用"],
            },
            yAxis: {},
            series: [
                {
                    name: "用户量",
                    type: "bar",
                    data: this.equipUseNum,
                },
            ],
        }
    },

    mounted2() {
      //this.$root => app
      this.myChart2 = this.$root.echarts.init(
        document.getElementById("myChart2")
      );
      // 绘制图表
      this.option2 = {
        grid: {
          x: 25,
          y: 45,
          x2: 5,
          y2: 20,
          borderWidth: 1,
        },
        legend: { data: ["b", "a"] },
        tooltip: {},
        xAxis: {
            data: this.curMonthDate,
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: this.monthNum,
          },
        ],
      };
      this.myChart2.setOption(this.option2)
    },
  },
};
</script>

<style  scoped>
.body {
  background-color: white;
}
.box1 {
  height: 180px;
  background-color: rgb(238, 241, 246);
}
.main1 {
  height: 155px;
}
.main1_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
  /* width: 60%; */
  height: 155px;
}
.main1_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
  width: 40%;
  height: 155px;
}
.progress {
  /* position: relative; */
  height: 35px;
  display: flex;
  /* margin-left: 20px; */
}
.state {
  font-size: 15px;
  margin-left: 15px;
  margin-top: 7px;
  position: absolute;
}
.progress_state {
  margin-left: 80px;
  width: 100px;
  /* margin-top: 3px; */
}
.state_num {
  /* float: left; */
  margin-top: 7px;
  margin-left: 5px;
}

.circle {
  width: 92px;
  position: relative;
}
.box2 {
  height: 180px;
  background-color: rgb(238, 241, 246);
}
.box3 {
  height: 180px;
  background-color: rgb(238, 241, 246);
}
.box4 {
  height: 200px;
  background-color: rgb(238, 241, 246);
}
.myChart1 {
  left: 27px;
  top: -10px;
  width: 250px;
  height: 250px;
}
.box5 {
  height: 200px;
  background-color: rgb(238, 241, 246);
}
.myChart2 {
  width: 100%;
  height: 100%;
  top: 20px;
}
.box6 {
  height: 200px;
  background-color: rgb(238, 241, 246);
}
.box7 {
  height: 200px;
  background-color: rgb(238, 241, 246);
}
.box8 {
  height: 200px;
  background-color: rgb(238, 241, 246);
}
.title {
  height: 25px;
  width: 100%;
  position: relative;
  border-bottom: 2px solid white;
}
.title > .title_image {
  position: absolute;
  left: 10px;
  top: 5px;
}
.title > .title_name {
  position: absolute;
  left: 40px;
  font-size: 15px;
}
.el-row {
  margin-bottom: 20px;
  /* &:last-child {
    margin-bottom: 0;
  } */
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>